<!DOCTYPE html>
<html>
<!-- sadfasdfsadfasdfasdfasdfassassadfasdfdfasdfdfasasdfasddff -->

<head>
    <meta charset="UTF-8">
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/demo.css">
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
    <script src="../js/jquery.serializejson.min.js"></script>
</head>

<body>

    <div class="easyui-layout" data-options="fit:true">
        <!--  <div data-options="region:'center',iconCls:'icon-ok'"> -->
        <table id="dg" class="easyui-datagrid" data-options="singleSelect:true,url:'datagrid_data1.json',method:'get',fit:true" pagination="true" idField="itemid"></table>
        <!-- <table class="easyui-datagrid" data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
                <thead>



                    <tr>
                        <th data-options="field:'itemid',align:'center'" width="60">ID</th>
                        <th data-options="field:'productid',align:'center'" width="60">是否匿名</th>
                        <th data-options="field:'listprice',align:'center'" width="80">评论对象</th>
                        <th data-options="field:'unitcost',align:'center'" width="140">评论内容</th>
                        <th data-options="field:'attr1',align:'center'" width="80">评论时间</th>
                        <th data-options="field:'status',align:'center'" width="60">评论状态</th>
                        <th data-options="field:'status',align:'center'" width="60">评论状态</th>
                    </tr>
                </thead>
            </table> -->
        <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px;height:350px;padding:15px">
            <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
                <input type="hidden" name="_id" />

                <div style="margin-bottom:30px">
                    <input class="easyui-checkbox" value="true" id="anonymity" type="checkbox" name="anonymity" style=" display: inline-block;" data-options="label:'是否过审:'">
                </div>
                <div style="margin-bottom:30px">
                    <input class="easyui-textbox" name="name" style="width:90%; display: inline-block;" data-options="label:'名称:',required:true">
                </div>
                <!-- <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="email" style="width:90%" data-options="label:'Email:',required:true,validType:'email'">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="subject" style="width:90%" data-options="label:'Subject:',required:true">
                    </div> -->
                <div style="margin-bottom:20px">
                    <input class="easyui-textbox" name="content" style="width:90%;height:60px" data-options="label:'内容:',multiline:true">
                </div>
                <div style="margin-bottom:30px">
                    <input class="easyui-datebox" name="time" style="width:90%; display: inline-block;" data-options="label:'时间:',required:true">
                </div>

            </form>
            <div style="text-align:center;padding:5px 0">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
            </div>
        </div>
    </div>
    <!-- </div> -->


</body>

<script>
    $(".menu li a").click(function() {
        var title = $(this).text();
        var link = $(this).attr('link');
        $('#tt').tabs('add', {
            title: title,
            fit: true,
            content: '<iframe scrolling="auto" frameborder="0" src="' + link + '" width="100%" height="100%"></iframe>',
            closable: true
        });

    })



    $('#dg').datagrid({
        url: 'http://127.0.0.1:3000/comment/list',
        method: 'post',
        fit: true,
        // singleSelect: false, //允许选择多行
        // selectOnCheck: true,//true勾选会选择行，false勾选不选择行, 1.3以后有此选项。重点在这里
        checkOnSelect: true,
        singleSelect: false,
        columns: [
            [
                /* <th field="ck" checkbox="true"></th>
                <th field="itemid" width="80">Item ID</th> */

                // { field: 'checkbox', width: 100},
                {
                    field: 'ck',
                    checkbox: true,
                    width: 100
                },
                // { field: '_id',title: 'id', width: 100},
                {
                    field: 'anonymity',
                    title: '是否通过审核',
                    width: 100
                }, {
                    field: 'name',
                    title: '评论名称',
                    width: 100
                }, {
                    field: 'content',
                    title: '内容',
                    width: 300
                },
                // { field: 'states', title: '是否通过审核', width: 100 },
                {
                    field: 'time',
                    title: '时间',
                    width: 200
                }, {
                    field: '_id',
                    title: '操作',
                    width: 180,
                    formatter: function(value, row, index) {
                        return `<a href="javascript:deleData('${row._id}')">删除</a> <a href="javascript:editData('${row._id}')">修改</a>`;
                    }
                }
            ]
        ],
        toolbar: [{
            text: 'Add',
            iconCls: 'icon-add',
            handler: function() {
                $('#dlg').dialog('open')
            }
        }, {
            text: '删除',
            iconCls: 'icon-cut',
            handler: function() {
                deleteRows();
                // alert('cut')
            }
        }, '-', {
            text: 'Save',
            iconCls: 'icon-save',
            handler: function() {
                alert('save')
            }
        }]

    });

    function submitForm() {

        $('#ff').form('submit', {
            onSubmit: function() {
                // console.log($(this).form('enableValidation').form('validate'));
                // var formData = $("#ff").serializeJSON();
                if ($(this).form('enableValidation').form('validate')) {
                    // 表单验证成功

                    var formData = $("#ff").serializeJSON();
                    console.log(formData);
                    console.log(formData._id);
                    if (formData._id.length > 0) {
                        $.ajax({
                            url: 'http://localhost:3000/comment/data/' + formData._id,
                            // url:'http://localhost:3000/comment/data/' + formData._id,
                            type: 'put',
                            data: formData
                        }).then(res => {
                            $('#dlg').dialog('close');
                            $("#dg").datagrid("reload");
                        })
                    } else {
                        delete formData._id;
                        // alert(11111111);
                        $.ajax({
                            url: 'http://localhost:3000/comment/data',
                            type: 'post',
                            data: formData
                        }).then(res => {
                            $('#dlg').dialog('close');
                            $("#dg").datagrid("reload");
                        })
                    }
                }
                return false;
            }
        });
    }

    function clearForm() {
        $('#ff').form('clear');
    }

    function editData(id) {
        $('#ff').form('load', 'http://localhost:3000/comment/data/' + id);
        $('#dlg').dialog('open');
    }

    function deleData(id) {
        $.messager.confirm('提示', '你确认删除该数据?', function(r) {
            if (r) {
                $.ajax({
                    url: 'http://localhost:3000/comment/data/' + id,
                    type: 'delete'
                }).then(res => {
                    $("#dg").datagrid("reload");
                })
            }
        });
    }

    function deleteRows() {
        $.messager.confirm('提示', '你确认删除该数据?', function(r) {
            if (r) {
                var selections = $('#dg').datagrid('getSelections');
                console.log(selections.length);
                if (selections.length > 0) {
                    var ids = [];
                    for (var i = 0; i < selections.length; i++) {
                        ids.push(selections[i]._id);

                        console.log(selections[i]._id);
                    }
                    $.ajax({
                        url: 'http://localhost:3000/comment/data/removes',
                        type: 'post',
                        data: {
                            ids: ids.toString()
                        }
                    }).then(res => {
                        $('#dg').datagrid('reload');
                    })
                }
            }
        });
    }
</script>

</html>